<template>
  <div class="designer-description">
    <el-form :inline="true" :model="model" class="demo-form-inline">
      <!-- <el-form-item label="工单号：" v-if="isGdEditorPage">
        {{ decodeURI(routeQuery.workOrderNo) || '暂无数据' }}
      </el-form-item> -->
      <el-form-item label="产品编码：">
        {{ decodeURI(routeQuery.partNo) || '暂无数据' }}
      </el-form-item>
      <el-form-item label="产品名称：">
        <div class="partName">{{ routeQuery.partName || '暂无数据' }}</div>
      </el-form-item>
      <el-form-item label="所有产品工艺路线：">
        <el-input placeholder="选择产品工艺路线" disabled v-model="model.name" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="openModal"></el-button>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="signboard">
      <div class="circle"></div>
      <div class="name">工单首工序</div>
      <div class="circle df"></div>
      <div class="name">工段首工序</div>
      <div class="circle de"></div>
      <div class="name">工段尾工序</div>
      <div class="circle we"></div>
      <div class="name">工单尾工序</div>
    </div>
    <common-modal-template ref="commonModalTemplate" :key="timer" :option="tableOption" @getSelectedRows="getSelectedRows" @newKey="newKey"></common-modal-template>
  </div>
</template>
<script>
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template';
import { mapState } from 'vuex';
export default {
  components: {
    CommonModalTemplate
  },
  props: {
    productData: {
      type: Array,
      default: () => []
    },
    // 是否工单工艺路线设计器
    isGdEditorPage: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    productData: {
      handler(val) {
        // console.log(val, 'designHeader');
      }
    },
    deep: true
  },
  data() {
    return {
      model: {},
      modalName: 'processModal',
      timer: new Date().getTime(),
      tableOption: {} //公用模态框表格属性
    };
  },
  computed: {
    ...mapState({
      currentStationInfo: (state) => state.design.currentStationInfo,
      allActiveStations: (state) => state.design.allActiveStations
    }),
    // 路由参数
    routeQuery() {
      return this.$route.query;
    },
    routePath() {
      return this.$route.path;
    },
    // 查看页面 只读
    readOnlyPage() {
      if (this.routePath.endsWith('pdesign') || this.routePath.endsWith('gdesign')) {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    openModal() {
      if (this.readOnlyPage) {
        return;
      }
      this.modalName = 'processModal';
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '选择工艺路线（双击选择）',
        url: '/api/mes-product/process/page',
        method: 'post',
        page: true,
        refreshBtn: false,
        index: true,
        align: 'center',
        rowSelectionType: 'single',
        showDetails: true,
        addBtn: false,
        searchLabelWidth: 110,
        columnDefs: [
          {
            label: '产品编码',
            prop: 'productPartNo',
            search: true,
            searchValue: this.$route.query.partNo
          },
          {
            label: '产品名称',
            prop: 'productPartName',
            search: true
          },
          {
            label: '产品型号',
            prop: 'productPartModel'
          },
          {
            label: '工艺名称',
            prop: 'name'
          },
          {
            label: '工艺路线编码',
            prop: 'code'
          },
          {
            label: '工艺路线版本',
            prop: 'version'
          },
          {
            label: '工艺路线状态',
            prop: 'status',
            type: 'select',
            search: true,
            dicData: [
              {
                label: '未设计',
                value: 1
              },
              {
                label: '待审核',
                value: 2
              },
              {
                label: '已发布',
                value: 3
              }
            ],
            html: true,
            formatter: (val) => this.$statusText.GYLX(val.status)
          }
        ]
      };
    },
    // 获取选择的物料模态框行数据
    getSelectedRows(rowData) {
      switch (this.modalName) {
        case 'processModal':
          if (this.isGdEditorPage) {
            this.model.name = this._get(rowData, 'partNo', '');
            this.model.partMasterId = this._get(rowData, 'partMasterId', '');
            this.model.id = this._get(rowData, 'id', '');
            this.$emit('changeProcess', this.model.id);
          } else {
            this.model.name = this._get(rowData, 'partNo', '');
            this.model.id = this._get(rowData, 'id', '');
            this.$emit('changeProcess', this.model.id);
          }
          break;
        default:
          break;
      }
    },
    newKey() {
      this.timer = new Date().getTime();
    }
  }
};
</script>
<style scoped lang="scss" scoped>
.designer-description {
  display: flex;
  padding: 5px;
  align-items: center;
  font-size: 16px;
  .el-form-item {
    margin: 5px 10px 5px 5px;
    ::v-deep .el-form-item__label {
      font-size: 16px;
      font-weight: 600;
      color: #02668a;
      padding-right: 0;
    }
    ::v-deep .el-form-item__content {
      font-size: 16px;
      font-weight: 600;
      color: #02668a;
      line-height: 32px;
      // .partName {
      //   width: 100px;
      //   overflow: hidden;
      //   text-overflow: ellipsis;
      //   white-space: nowrap;
      // }
    }
  }
  .desc-name {
    width: 225px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .desc-type {
    width: 310px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .signboard {
    display: flex;
    align-items: center;
    user-select: none;
    .circle {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #02a7f0;
      margin-right: 5px;
      &.df {
        background-color: #ffff80;
      }
      &.de {
        background-color: #c280ff;
      }
      &.we {
        background-color: #f59a23;
      }
    }
    .name {
      margin-right: 5px;
      white-space: nowrap;
      font-weight: bold;
      font-size: 14px;
    }
  }
}
</style>
